{{define "index"}}
<div class="form-container">

    <h2>生成短链</h2>
    <!-- 表单移除 action 和 method，通过 JS 处理提交 -->
    <form id="shortenForm" class="shorten-form">
        <div class="form-group">
            <label for="longUrl" class="form-label">长链接 <span class="required">*</span></label>
            <input
                    type="url"
                    id="longUrl"
                    name="longUrl"
                    placeholder="https://example.com"
                    required
                    class="form-input"
                    title="请输入有效的URL（以http/https开头）"
            >
            <p class="input-hint">支持 http/https 协议的链接</p>
        </div>

        <div class="form-group">
            <label for="description" class="form-label">备注（可选）</label>
            <input
                    type="text"
                    id="description"
                    name="description"
                    placeholder="给这个短链起个名字吧"
                    class="form-input"
                    maxlength="50"
            >
        </div>
        <input type="hidden" name="creator" value="{{.User.Username}}">
        <input type="hidden" name="source" value="SELF">
        <button type="submit" class="btn submit-btn">
            <span class="btn-text">生成短链</span>
            <span class="btn-loading" style="display:none;">生成中...</span>
        </button>

        <!-- 提示信息区域（初始隐藏） -->
        <div id="successAlert" class="form-alert success" style="display:none;"></div>
        <div id="errorAlert" class="form-alert error" style="display:none;"></div>
    </form>
</div>

<script>
    // 拦截表单提交事件
    document.getElementById('shortenForm').addEventListener('submit', function(e) {
        e.preventDefault(); // 阻止表单默认提交（不刷新页面）

        // 清空之前的提示
        document.getElementById('successAlert').style.display = 'none';
        document.getElementById('errorAlert').style.display = 'none';

        // 显示加载状态
        document.querySelector('.btn-text').style.display = 'none';
        document.querySelector('.btn-loading').style.display = 'inline';

        // 收集表单数据
        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        // 异步调用接口（AJAX）
        fetch('/url/create', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json', // 告诉后端是JSON格式
            },
            body: JSON.stringify(data), // 转换为JSON字符串
        })
            .then(response => {
                // 解析JSON响应（无论成功/失败都解析）
                return response.json().catch(() => {
                    // 接口返回非JSON格式时的错误处理
                    return { message: '接口返回格式错误' };
                });
            })
            .then(result => {
                // 恢复按钮状态
                document.querySelector('.btn-text').style.display = 'inline';
                document.querySelector('.btn-loading').style.display = 'none';
                // 根据接口返回的结果显示提示
                if (result.code === '00000' || !result.code) { // 假设成功状态码为0000
                    const shortUrl = result.data;
                    document.getElementById('successAlert').innerHTML =
                        `生成成功！短链接：<a href="${shortUrl}" target="_blank">${shortUrl}</a>`;
                    document.getElementById('successAlert').style.display = 'block';
                } else {
                    // 显示错误信息（如“域名不存在”）
                    document.getElementById('errorAlert').textContent =
                        result.message || '生成失败，请重试';
                    document.getElementById('errorAlert').style.display = 'block';
                }
            })
            .catch(error => {
                // 网络错误处理
                document.querySelector('.btn-text').style.display = 'inline';
                document.querySelector('.btn-loading').style.display = 'none';
                document.getElementById('errorAlert').textContent = '网络错误，请检查连接';
                document.getElementById('errorAlert').style.display = 'block';
            });
    });
</script>
{{end}}

{{template "base.html" .}}